<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #app {
            width: 800px;
            margin: 0 auto;
        }

        .header {
            border-bottom: 1px dotted #000;
            padding-bottom: 10px;
        }

        .title {
            background-color: #4169e1;
            font-size: 16px;
            color: #fff;
            padding: 10px 5px;
        }

        .choose-text {
            margin: 10px 0;
        }

        label {
            margin-right: 20px;
        }

        .item {
            padding: 15px 5px 10px;
            background-color: #faebd7;
            margin: 10px 0;
            color: #333;
        }

        .item h2 {
            font-size: 16px;
        }

        .item p {
            font-size: 14px;
            margin-top: 15px;
            line-height: 1.5;
        }
    </style>

</head>

<body>
    <div id="app">
        <h1 class="title">星座分析器</h1>
        <div class="header">
            <p class="choose-text">请选择星座</p>
            <label>
                <input type="checkbox" v-model="checkbox1">
                狮子座
            </label>
            <label>
                <input type="checkbox" v-model="checkbox2">
                摩羯座
            </label>
            <label>
                <input type="checkbox" v-model="checkbox3">
                处女座
            </label>
            <label>
                <input type="checkbox" v-model="checkbox4">
                天秤座
            </label>
        </div>

        <div class="item" v-if="checkbox1">
            <h2>狮子座</h2>
            <p>狮子座通常是一名比较好的组织管理角色，想要驯服这样一名喜欢表现的人，令他们成为忠实勤勉的下属，上司必须有足够使其信服的威信和卓尔不群的能力。一名令狮子座心服口服的主管，不用整天地耳提面命，也会令狮子座无怨无悔的承担起艰巨的工作，哪怕这份工作没有任何的乐趣。
            </p>
        </div>
        <div class="item" v-if="checkbox2">
            <h2>摩羯座</h2>
            <p>摩羯座是体现冬天开始的星座，冬天把“实现价值”毫无保留地带给了摩羯座出生的人。他们善于独立实现自己心中的理想。喜欢从容不迫、深思熟虑，待人亲切和蔼、心胸宽广、有抱负，以踏实的方式追求成功，信奉有付出就会有回报的信条。即使遇到挫折也能砥砺前行，顽强的毅力及意志是你迈向成功的不二法门。摩羯座的人，尤其当有几个行星同时处于你的星座时，你将是一个具有现实主义思想和有抱负的人；同时你又容易被热烈的感情征服，是一个有强烈忘我精神的人。
            </p>
        </div>
        <div class="item" v-if="checkbox3">
            <h2>处女座</h2>
            <p>天文学中室女座的形象是个长着翅膀的美丽女神。可见其存在的悠久性和重要性。室女座同时也是天使，为人类带来福祉和美好。
            </p>
        </div>
        <div class="item" v-if="checkbox4">
            <h2>天秤座</h2>
            <p>凡事要求公平，也极力反对不公平的事，是天秤座性格最明显的地方。他对于不合理的事，采取激烈的态度，不是愤怒，便是冷漠以对。
            </p>
        </div>

    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { ref, reactive, watch, createApp, toRefs } = Vue;
        createApp({
            setup() {
                const checkbox1 = ref(false)
                const checkbox2 = ref(false)
                const checkbox3 = ref(false)
                const checkbox4 = ref(false)
                return {
                    checkbox1,
                    checkbox2,
                    checkbox3,
                    checkbox4
                }
            },
            template: ``


        }).mount('#app')
    </script>
</body>

</html>